<template>
  <div class="list">
    <div class="list-item" v-for="(item,index) in data">
      <div class="left">
        <img :src="item.frontImg"/>
      </div>
      <div class="right">
        <p><span class="name">{{item.name}}</span></p>
        <p><span class="avgPrice">￥{{item.avgPrice}}/人</span><span class="areaName">{{item.areaName}}</span></p>
        <p><span class="cateName">{{item.cateName}}</span><span class="smartTag" :style="{color:item.smartTag.color,backgroud:item.smartTag.backgroundColor}">{{item.smartTag.content}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "list",
        props:{
          data:{
            type:Array,
            default:function () {
              return [
                {
                  name:'熊猫不走生日蛋糕（南村店）',
                  avgPrice:13,
                  avgScore:3.7,
                  areaName:'长隆/南村/万达',
                  cateName:'蛋糕',
                  frontImg:'https://img.meituan.net/msmerchant/45b4ba5f42b054a7d45ab5b98ccb9033487533.jpg',
                  smartTag:{
                    content:unescape('%u4fc3%u9500%u4e2d'),
                    color:'#be9e4d',
                    backgroundColor:'#fbf4e4'
                  }
                },
                {
                  name:'熊猫不走生日蛋糕（南村店）',
                  avgPrice:13,
                  avgScore:3.7,
                  areaName:'长隆/南村/万达',
                  cateName:'蛋糕',
                  frontImg:'https://img.meituan.net/msmerchant/45b4ba5f42b054a7d45ab5b98ccb9033487533.jpg',
                  smartTag:{
                    content:unescape('%u4fc3%u9500%u4e2d'),
                    color:'#be9e4d',
                    backgroundColor:'#fbf4e4'
                  }
                }
              ]
            }
          }
        },
    }
</script>

<style lang="less" scoped>
  .list-item{
    height: 120px;
    text-align: left;
    border-style: solid;
    border-width: 1px 0px;
    .left{
      display: inline-block;
      padding: 0px 10px;
      line-height: 120px;
      img{
        width: 100px;
        height: 100px;
        vertical-align: middle;
      }
    }
    .right{
      vertical-align: middle;
      display: inline-block;
      padding: 10px;
      p{
        line-height: 2rem;
      }
      .name{
        font-size: 1.6rem;
      }
      .areaName,.smartTag{
        padding-left: 20px;
      }
    }
  }
</style>
